<template>
    <!--    章节练习答题页-->
    <view :class="{'yejian': if_theme_dark}">
        <!--#ifdef APP-PLUS-->
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <!--#endif-->
        <view class="kaoshi-head">
            <view class="kaoshi-head-top">
                <view class="kaoshi-head-left" @tap="$navigateBack">
                    <view class="iconfont icon-zuojiantou"></view>
                </view>
                <view class="kaoshi-head-m">
                    <view :class="{ 'moshi-active': !show_beiti, moshi: show_beiti }" @tap="show_beiti = false">答题模式
                    </view>
                    <view :class="{ 'moshi-active': show_beiti, moshi: !show_beiti }" @click="show_beiti_click">背题模式
                    </view>
                </view>
                <view class="kaoshi-head-right">
                    <view class="iconfont icon-shezhi1" @tap="show_change_moshi=true"></view>
                </view>
            </view>
        </view>
        <swiper class="swiper" :autoplay="false" :current="current" style="height: calc(100vh - 188upx);" :duration="0"
                @change="swiper_change">
            <swiper-item>
                <scroll-view scroll-y style="height: 100%;">
                    <view class="questionBankAnswer"
                          :class="{'font1': font_size_type === 1, 'font2': font_size_type === 2, 'font3': font_size_type === 3, 'font4': font_size_type === 4}"
                          v-if="last_timu && last_timu.id">
                        <view class="questionBankAnswer-flex">
                            <view class="questionBankAnswer-top-l">
                                <view class="questionBankAnswer-top">
                                    <span>{{ timu_order-1 }}</span>/{{ total_num }}
                                </view>
                                <view class="questionBankAnswer-tx">{{ last_timu.type == 1 ? '单选' : last_timu.type == 2
                                    ? '多选' : '判断' }}
                                </view>
                            </view>
                        </view>
                        <view class="questionBankAnswer-title">{{ last_timu.question_name }}</view>
                    </view>
                    <!-- type 1单选 2多选 3判断 -->
                    <view class="questionBankAnswer-content"
                          :class="{'font1': font_size_type === 1, 'font2': font_size_type === 2, 'font3': font_size_type === 3, 'font4': font_size_type === 4}"
                          v-if="last_timu && last_timu.answers">
                        <block v-for="(item, index) in last_timu.answers" :key="index">
                            <view class="questionBankAnswer-content-menu">
                                <view class="questionBankAnswer-content-num">
                                    {{ item.answer_code }}
                                </view>
                                <view class="questionBankAnswer-content-txt">{{ item.answer }}</view>
                            </view>
                        </block>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view scroll-y style="height: 100%;">
                    <view class="questionBankAnswer"
                          :class="{'font1': font_size_type === 1, 'font2': font_size_type === 2, 'font3': font_size_type === 3, 'font4': font_size_type === 4}"
                          v-if="current_timu && current_timu.id">
                        <view class="questionBankAnswer-flex">
                            <view class="questionBankAnswer-top-l">
                                <view class="questionBankAnswer-top">
                                    <span>{{ timu_order }}</span>
                                    /{{ total_num }}
                                </view>
                                <view class="questionBankAnswer-tx">{{ current_timu.type == 1 ? '单选' : current_timu.type
                                    == 2 ? '多选' : '判断' }}
                                </view>
                            </view>
                        </view>
                        <view class="questionBankAnswer-title">{{ current_timu.question_name }}</view>
                    </view>
                    <view class="questionBankAnswer-content"
                          :class="{'font1': font_size_type === 1, 'font2': font_size_type === 2, 'font3': font_size_type === 3, 'font4': font_size_type === 4}"
                          v-if="current_timu && current_timu.answers">
                        <block v-for="(item, index) in current_timu.answers" :key="index">
                            <view class="questionBankAnswer-content-menu" @tap="post_answer(item, index)"
                                  :class="{'active-bg': (copy_user_answer && ((copy_user_answer[current_timu.id] && copy_user_answer[current_timu.id][index].active) || copy_post_status[current_timu.id] || show_beiti) &&  ((current_timu.type == 2 && ((!current_timu.post_status && copy_user_answer[current_timu.id][index].active) ||  (item.right_flg && show_beiti) ||  (current_timu.post_status && item.right_flg))) || ((current_timu.type == 1 || current_timu.type == 3 ) && item.right_flg))), //// 用户答题完毕，正确答案显示，用户
								// 错误答案显示
								'error-bg': copy_user_answer && ((current_timu.type == 2 && current_timu.post_status) || (current_timu.type == 1 || current_timu.type == 3)) && copy_user_answer[current_timu.id] && copy_user_answer[current_timu.id][index].active && copy_user_answer[current_timu.id] && copy_user_answer[current_timu.id][index] && copy_user_answer[current_timu.id][index].error_flg}"
                            >
                                <!-- 用户选择错误答案显示特殊样式 -->
                                <view class="questionBankAnswer-content-num"
                                      :class="{'active': (copy_user_answer && ((copy_user_answer[current_timu.id] && copy_user_answer[current_timu.id][index].active) || copy_post_status[current_timu.id] || show_beiti) &&  ((current_timu.type == 2 && ((!current_timu.post_status && copy_user_answer[current_timu.id][index].active) ||  (item.right_flg && show_beiti) ||  (current_timu.post_status && item.right_flg))) || ((current_timu.type == 1 || current_timu.type == 3 ) && item.right_flg))), //// 用户答题完毕，正确答案显示，用户
								// 错误答案显示
								'error': copy_user_answer && ((current_timu.type == 2 && current_timu.post_status) || (current_timu.type == 1 || current_timu.type == 3)) && copy_user_answer[current_timu.id] && copy_user_answer[current_timu.id][index].active && copy_user_answer[current_timu.id] && copy_user_answer[current_timu.id][index] && copy_user_answer[current_timu.id][index].error_flg}">
                                    {{ item.answer_code === '1' ? 'A' : item.answer_code === '0' ? 'B' :
                                    item.answer_code }}
                                    <!-- 考试不显示 -->
                                    <!-- 1、用户提交答案以后显示 -->
                                    <!-- 2、背题模式显示 -->
                                    <view v-if="(copy_post_status[current_timu.id] || show_beiti) && item.right_flg"
                                          class="questionBankAnswer-dui">
                                        <image :src="static_media.img01" class="questionBankAnswer-dui-img"></image>
                                    </view>
                                </view>
                                <view class="questionBankAnswer-content-txt">{{ item.answer }}</view>
                            </view>
                        </block>
                    </view>
                    <view v-if="current_timu.answers && (current_timu.type == 2)"
                          :class="{'font1': font_size_type === 1, 'font2': font_size_type === 2, 'font3': font_size_type === 3, 'font4': font_size_type === 4}">
                        <button :class="is_duoxuan_sub ? 'duoxuan_checked' : 'duoxuan' " type=" "
                                @tap="post_answer_req">{{is_duoxuan_sub ? '提交成功' : '选择后点击提交'}}
                        </button>
                    </view>
                    <view class="questionBankAnswer-jiexi" v-if="show_beiti || copy_post_status[current_timu.id]"
                          :class="{'font1': font_size_type === 1, 'font2': font_size_type === 2, 'font3': font_size_type === 3, 'font4': font_size_type === 4}">
                        <!--如果答对加class=dui-->
                        <view class="questionBankAnswer-jiexi-daan"
                              :class="{'dui': answer_type==1,'cuo': answer_type==0 }">
                            <view class="questionBankAnswer-jiexi-daan-flex">
                                <view>正确答案</view>
                                <view class="questionBankAnswer-jiexi-daan-flex-dui">
                                    {{ current_timu.right_answer == 1 ? '对' : current_timu.right_answer == 0 ? '错' :
                                    current_timu.right_answer }}
                                </view>
                            </view>
                            <view class="questionBankAnswer-jiexi-flex" v-if="my_answer">
                                <view class="questionBankAnswer-jiexi-daan-line"></view>
                                <view class="questionBankAnswer-jiexi-daan-flex">
                                    <view>我的答案</view>
                                    <view :class="[copy_post_answer_right[current_timu.id]?'questionBankAnswer-jiexi-daan-flex-dui':'questionBankAnswer-jiexi-daan-flex-cuo']"
                                          class="">{{my_answer}}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="questionBankAnswer-jiexi-jx"
                              v-if="show_beiti || copy_post_status[current_timu.id]">
                            <view class="questionBankAnswer-jiexi-jx-title">解析</view>
                            <view>{{ current_timu.area }}</view>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view scroll-y style="height: 100%;">
                    <view class="questionBankAnswer"
                          :class="{'font1': font_size_type === 1, 'font2': font_size_type === 2, 'font3': font_size_type === 3, 'font4': font_size_type === 4}"
                          v-if="next_timu && next_timu.id">
                        <view class="questionBankAnswer-flex">
                            <view class="questionBankAnswer-top-l">
                                <view class="questionBankAnswer-top">
                                    <span>{{ timu_order + 1 }}</span>
                                    /{{ total_num }}
                                </view>
                                <view class="questionBankAnswer-tx">{{ next_timu.type == 1 ? '单选' : next_timu.type == 2
                                    ? '多选' : '判断' }}
                                </view>
                            </view>
                        </view>
                        <view class="questionBankAnswer-title">{{ next_timu.question_name }}</view>
                    </view>
                    <!-- type 1单选 2多选 3判断 -->
                    <view class="questionBankAnswer-content"
                          :class="{'font1': font_size_type === 1, 'font2': font_size_type === 2, 'font3': font_size_type === 3, 'font4': font_size_type === 4}"
                          v-if="next_timu && next_timu.answers">
                        <block v-for="(item, index) in next_timu.answers" :key="index">
                            <view class="questionBankAnswer-content-menu">
                                <view class="questionBankAnswer-content-num">
                                    {{ item.answer_code }}
                                </view>
                                <view class="questionBankAnswer-content-txt">{{ item.answer }}</view>
                            </view>
                        </block>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
        <!--<view v-if="guide" style="bottom: 50px;position: absolute"><img @touchend="touchend" :src="static_media.img01" alt=""></view>-->
        <ifguide ref="ifguide"></ifguide>
        <view class="order-pay">
            <view class="questionBankAnswer-bottom">
                <view class="questionBankAnswer-bottom-flex"
                      :class="{'collect': current_timu.is_fav == 1}"
                      @tap="collect_opt">
                    <view class="iconfont "
                          :class="{'icon-shoucang': current_timu.is_fav != 1, 'icon-shoucang1': current_timu.is_fav == 1}"></view>
                    <view>{{ current_timu.is_fav == 1 ? '已收藏' : '收藏'}}</view>
                </view>
                <!--                <view class="questionBankAnswer-bottom-flex" @tap="jiucuo">-->
                <!--                    <view class="iconfont icon-lianxi_"></view>-->
                <!--                    <view>纠错</view>-->
                <!--                </view>-->
            </view>
            <view class="questionBankAnswer-dc">
                <view class="questionBankAnswer-dc-flex">
                    <view class="iconfont icon-dui"></view>
                    <view>{{ my_res.right_num }}</view>
                </view>
                <view class="questionBankAnswer-dc-flex">
                    <view class="iconfont icon-cuo"></view>
                    <view>{{ my_res.error_num }}</view>
                </view>
            </view>
            <view class="questionBankAnswer-r" @tap="show_choice_timu_list = true">
                <view class="iconfont icon-fenlei" @tap="show_choice_timu_list=true"></view>
                <view class="questionBankAnswer-r-menu">
                    <span>{{ timu_order }}</span>
                    /{{ total_num }}
                </view>
            </view>
        </view>

        <view class="order-pay-z"
              v-if="show_choice_timu_list"
              @tap="show_choice_timu_list = false"></view>
        <view class="tika" v-if="show_choice_timu_list">
            <view class="order-pay1">
                <view class="questionBankAnswer-bottom">
                    <view class="questionBankAnswer-bottom-flex"
                          :class="{'collect': current_timu.is_fav == 1}"
                          @tap="collect_opt">
                        <view class="iconfont "
                              :class="{'icon-shoucang': current_timu.is_fav != 1, 'icon-shoucang1': current_timu.is_fav == 1}"></view>
                        <view>{{ current_timu.is_fav == 1 ? '已收藏' : '收藏'}}</view>
                    </view>
                    <!--                    <view class="questionBankAnswer-bottom-flex" @tap="jiucuo">-->
                    <!--                        <view class="icon icon-lianxi_"></view>-->
                    <!--                        <view>纠错</view>-->
                    <!--                    </view>-->
                </view>
                <view class="questionBankAnswer-dc">
                    <view class="questionBankAnswer-dc-flex">
                        <view class="iconfont icon-dui"></view>
                        <view>{{ my_res.right_num }}</view>
                    </view>
                    <view class="questionBankAnswer-dc-flex">
                        <view class="iconfont icon-cuo"></view>
                        <view>{{ my_res.error_num }}</view>
                    </view>
                </view>
                <view class="questionBankAnswer-r">
                    <view class="iconfont icon-fenlei"></view>
                    <view class="questionBankAnswer-r-menu">
                        <span>{{ timu_order }}</span>
                        /{{ total_num }}
                    </view>
                </view>
            </view>
            <view class="tika-content">
                <block v-for="(item, index) in timu_list"
                       :key="index">
                    <view @tap="choice_timu_by_id(index)"
                          class="tika-content-n green-background"
                          v-if="item.state === 2">{{ index+1 }}
                    </view>
                    <view @tap="choice_timu_by_id(index)"
                          class="tika-content-n red-background"
                          v-else-if="item.state === 1">{{ index+1 }}
                    </view>
                    <view class="tika-content-n"
                          v-else-if="item.state === 3"
                          @tap="choice_timu_by_id(index)">{{ index+1 }}
                    </view>
                </block>
            </view>
        </view>
        <view class="order-pay-z"
              v-if="show_change_moshi"
              @tap="show_change_moshi = false"></view>
        <view class="tika" v-if="show_change_moshi" style="height: 162px;">
            <view class="tika-content">
                <view class="uni-list">
                    <view class="uni-list-cell uni-list-cell-pd">
                        <view class="uni-list-cell-db">清除本章答题记录</view>
                        <view class="qkbutton" @tap="emptyLog">清空</view>
                    </view>
                    <view class="uni-list-cell uni-list-cell-pd">
                        <view class="uni-list-cell-db">夜间模式</view>
                        <switch color="#3c7bfc" :checked="if_theme_dark" @change="set_if_theme_dark"/>
                    </view>
                    <view class="uni-list-cell uni-list-cell-pd" style="position: relative;width: 100%;">
                        <slider activeColor="#3c7bfc" backgroundColor="#3c7bfc" @change="set_font_size_type"
                                :value="font_size_type" :min="1" :step="1" :max="4"
                                style="width: 92%;margin: 7px 0;height: 100%;"/>
                    </view>
                </view>
            </view>
        </view>

        <overtimu v-if="show_over_dati" :timuinfo="over_dati_info" @tap_handler="tap_handler"></overtimu>
        <ifcontinue v-if="show_continue_answer" :timuorder="timu_order" @tap_handler="tap_handler"></ifcontinue>
        <!--        <uni-popup :show="showPopupMiddleImg" type="middle" mode="fixed" @hidePopup="showPopupMiddleImg=false"-->
        <!--                   class="jiucuo">-->
        <!--            <view class="jc-h1">纠错</view>-->
        <!--            <textarea type="text" class="jiucuo-textarea" placeholder="请输入纠错信息" v-model="jiucuo_info"/>-->
        <!--            <button type="primary" @tap="jiucuo_post" class="jc-button">确认</button>-->
        <!--        </uni-popup>-->

    </view>
</template>

<script>
    // 退出答题组件
    import overtimu from '@/components/overtimu/index';
    import {mapState} from 'vuex';
    import uniPopup from "@/components/uni-popup/uni-popup.vue"
    import ifguide from "@/components/if-guide/index"
    import ifcontinue from "@/components/if-continue/index"

    export default {
        data() {
            return {
                type: '',//from_type 1：章节练习  2：历年真题
                copy_post_answer_right: [],
                //区分多选题是否点击提交按钮
                is_duoxuan_sub: false,
                //是否显示继续答题弹框
                show_continue_answer: false,
                //是否显示新用户左右滑动切换题目的提示
                guide: false,
                // 答题、背题模式
                show_beiti: false,
                // 上一题
                last_timu: {},
                // 当前题目
                current_timu: {},
                // 下一题
                next_timu: {},
                total_num: 0,//全部题目数
                // 用户输入的答案
                copy_user_answer: {},
                copy_right_answer_code: {},
                copy_post_status: {},
                // 是否显示退出答题弹框
                show_over_dati: false,
                over_dati_info: {},
                // 用于swiper组件的current更新
                current: 1,
                old: {
                    current: 1
                },
                // 答题开始时间
                start_time: 0,
                // 页面参数
                pages_params: {},
                // 显示购买vip
                show_buy_options: false,
                // 显示答题卡
                show_choice_timu_list: false,
                // 答题卡
                timu_list: [],
                // 字号大小
                show_change_moshi: false,
                font_size_type: 2, // 4种级别
                if_theme_dark: false, // 黑夜模式
                // 上次答到第几题
                timu_order: -1,
                // current_timu right error
                current_timu_right: 0,
                current_timu_error: 0,

                showPopupMiddleImg: false,
                jiucuo_info: '',

                has_answer_timu_list: [],
                current_tika_index: 0,
                answer_type: ''
            };
        },
        components: {
            overtimu,
            uniPopup,
            ifguide,
            ifcontinue
        },
        computed: {

            ...mapState(['subject', 'userinfo']),
            static_media() {
                return {
                    img01: this.$myConfig.localMedia + '/static/img/dui.png',
                }
            },
            my_answer() {
                let answers = this.copy_user_answer[this.current_timu.id];
                let answer = '';
                if (answers && answers.length > 0) {
                    for (let i = 0, leng = answers.length; i < leng; i++) {
                        if (answers[i].active) {
                            answer += answers[i].answer_code
                        }
                    }
                }
                if (answer === '1') {
                    answer = '对'
                } else if (answer === '0') {
                    answer = '错'
                }
                return answer;
            },
            my_res() {
                let right_num = 0
                let error_num = 0
                for (let i = 0, leng = this.timu_list.length; i < leng; i++) {
                    //if_que 答题状态：1是错2是对3是未答过此题
                    if (this.timu_list[i].state == 1) {
                        error_num++
                    } else if (this.timu_list[i].state == 2) {
                        right_num++
                    }
                }

                return {
                    right_num,
                    error_num
                };
            }
        },
        onBackPress() {
            this.over_dati();
            return true;
        },
        onLoad(opts) {
            this.pages_params = opts;
            this.id = opts.id
            this.type = opts.from_type
            this.get_timu_list();
            // 答题开始时间
            this.start_time = new Date().getTime();
        },
        onReady() {
            this.$refs.ifguide.if_guide();
        },
        methods: {
            // 获取答题卡
            async get_timu_list() {
                let data = {}
                let url = ''
                // 1：章节练习  2：历年真题
                if (this.type == 1) {
                    // 1：章节练习
                    data = {
                        unit_id: this.id
                    };
                    url = this.$myHttp.urlMap.unitCard
                } else if (this.type == 2) {
                    // 2：历年真题
                    data = {
                        library_id: this.id
                    };
                    url = this.$myHttp.urlMap.zhentiCard
                }

                let res = await this.$myHttp.post({
                    url: url,
                    data: data,
                    needLogin: true
                });
                if (res.code == 1) {
                    this.timu_list = res.data;
                    this.total_num = this.timu_list.length;
                    this.get_timu_order();
                }
            },
            // 获取用户答到第几题
            async get_timu_order() {
                let data = {}
                let url = ''
                // 1：章节练习  2：历年真题
                if (this.type == 1) {
                    // 1：章节练习
                    data = {
                        unit_id: this.id
                    };
                    url = this.$myHttp.urlMap.unit_postion
                } else if (this.type == 2) {
                    // 2：历年真题
                    data = {
                        library_id: this.id
                    };
                    url = this.$myHttp.urlMap.zhenti_postion
                }


                let res = await this.$myHttp.post({
                    url: url,
                    data: data,
                    needLogin: true
                });

                if (res.code == 1) {
                    this.timu_order = res.data
                    this.get_timu_info();
                }
            },
            // 根据答题卡获取题目
            async choice_timu_by_id(index) {
                this.timu_order = index + 1
                this.get_timu_info()
            },
            // 获取当前题目
            async get_timu_info() {
                let id = this.timu_list[this.timu_order - 1].id;
                let res = await this.$myHttp.post({
                    url: this.$myHttp.urlMap.timu_details,
                    data: {
                        id: id
                    },
                    needLogin: true
                });
                if (res.code == 1) {
                    if (res.data != []) {
                        let timu = this.set_right_flg(res.data);
                        this.current_timu = timu;
                        this.save_user_answer(this.current_timu);
                    } else {
                        this.current_timu = null;
                    }
                    // 获取上一题，下一题
                    this.$nextTick(() => {
                        if (this.total_num > 1) {
                            if (this.timu_order == 1) {
                                this.last_timu = null;
                                this.get_timu('next');
                            } else if (this.timu_order > 1 && this.timu_order < this.total_num) {
                                this.get_timu('pre');
                                this.get_timu('next');
                            } else if (this.timu_order == this.total_num) {
                                this.get_timu('pre');
                                this.next_timu = null;
                            }
                        } else if (this.total_num == 1) {
                            this.last_timu = null;
                            this.next_timu = null;
                        }
                    });
                }
            },
            //获取上一题、下一题  pre 上一题  next 下一题
            async get_timu(type) {
                let id = 0
                if (type == 'pre') {
                    id = this.timu_list[this.timu_order - 2].id;
                } else if (type == 'next') {
                    id = this.timu_list[this.timu_order].id;
                }
                let res = await this.$myHttp.post({
                    url: this.$myHttp.urlMap.timu_details,
                    data: {
                        id: id
                    },
                    needLogin: true
                });
                if (res.code == 1) {
                    if (res.data != []) {
                        let timu = this.set_right_flg(res.data);
                        if (type == 'pre') {
                            this.last_timu = timu;
                            this.save_user_answer(this.last_timu);
                        } else {
                            this.next_timu = timu;
                            this.save_user_answer(this.next_timu);
                        }
                    }
                }
            },
            // 设置正确答案的标记
            set_right_flg(timu) {
                if (timu) {
                    timu.post_status = 0;
                    if (timu.answers) {
                        for (let i = 0, leng = timu.answers.length; i < leng; i++) {
                            if (timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(timu.answers[i].answer_code.toString().toLowerCase().replace(/\s/g, '')) !== -1) {
                                timu.answers[i]['right_flg'] = true
                            }
                        }
                    }
                }
                return timu
            },
            // 本地存储用户答案
            save_user_answer(timu) {
                if (timu && timu.answers) {
                    if (!(this.copy_user_answer[timu.id])) {
                        this.copy_user_answer = Object.assign({}, this.copy_user_answer, {
                            [timu.id]: []
                        });
                        this.copy_right_answer_code = Object.assign({}, this.copy_right_answer_code, {
                            [timu.id]: timu.right_answer
                        });
                        this.copy_post_status = Object.assign({}, this.copy_post_status, {
                            [timu.id]: false
                        });
                        this.copy_post_answer_right = Object.assign({}, this.copy_post_answer_right, {
                            [timu.id]: false
                        });

                        for (let i = 0, leng = timu.answers.length; i < leng; i++) {
                            this.copy_user_answer[timu.id].push({
                                answer_code: timu.answers[i].answer_code,
                                error_flg: false,
                                active: false
                            })
                        }
                    }
                }
            },
            // 切换swiper
            swiper_change(e) {
                this.is_duoxuan_sub = false
                this.old.current = e.detail.current;
                // 上一题
                if (e.detail.current === 0) {
                    if (this.last_timu) {
                        this.next_timu = this.current_timu;
                        this.current_timu = this.last_timu;

                        this.$nextTick(() => {
                            this.timu_order = this.timu_order - 1;
                            if (this.timu_order == 1) {
                                this.last_timu = null;
                            } else {
                                this.get_timu('pre');
                            }
                        });
                    } else {
                        this.$myUtils.$prompt.showToast({
                            icon: 'none',
                            title: '没有上一题'
                        });
                    }
                }
                // 下一题
                if (e.detail.current === 2) {
                    if (this.next_timu) {
                        this.last_timu = this.current_timu;
                        this.current_timu = this.next_timu;
                        this.$nextTick(() => {
                            this.timu_order = this.timu_order + 1;
                            if (this.timu_order == this.total_num) {
                                this.next_timu = null;
                            } else {
                                this.get_timu('next');
                            }
                        });
                    } else {
                        let that = this;
                        uni.showModal({
                            title: '提示',
                            content: '已没有下一题',
                            confirmText: '结束练习',
                            confirmColor: '#3c7bfc',
                            success: function (res) {
                                if (res.confirm) {
                                    that.tap_handler(1);
                                } else if (res.cancel) {
                                    console.log('用户点击取消');
                                }
                            }
                        });
                    }
                }
                this.current = this.old.current;
                this.$nextTick(function () {
                    this.current = 1;
                });
            },
            // 提交答案
            post_answer(item, index) {
                // 如果背题模式，不做处理
                if (this.show_beiti) {
                    return;
                }
                // 如果是判断和单选。执行以下处理
                if (this.current_timu.type == 1 || this.current_timu.type == 3) {
                    this.$nextTick(() => {
                        if (this.copy_user_answer[this.current_timu.id]) {
                            for (let i = 0, leng = this.copy_user_answer[this.current_timu.id].length; i < leng; i++) {
                                this.copy_user_answer[this.current_timu.id].splice(i, 1, {
                                    ...this.copy_user_answer[this.current_timu.id][i],
                                    active: false,
                                    error_flg: false
                                })
                            }
                            if (this.current_timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(item.answer_code.toString().toLowerCase().replace(/\s/g, '')) === -1) {
                                this.copy_user_answer[this.current_timu.id].splice(index, 1, {
                                    ...this.copy_user_answer[this.current_timu.id][index],
                                    active: true,
                                    error_flg: true
                                })
                            } else {
                                this.copy_user_answer[this.current_timu.id].splice(index, 1, {
                                    ...this.copy_user_answer[this.current_timu.id][index],
                                    active: true,
                                    error_flg: false
                                })
                            }
                        }
                        this.post_answer_req();
                    });
                } else {
                    // 如果是多选。执行以下处理
                    if (this.copy_user_answer[this.current_timu.id]) {
                        if (this.is_duoxuan_sub = true) {
                            this.is_duoxuan_sub = false
                        }
                        if (this.copy_user_answer[this.current_timu.id][index]) {
                            if (this.copy_user_answer[this.current_timu.id][index].active) {
                                if (this.current_timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(item.answer_code.toString().toLowerCase().replace(/\s/g, '')) === -1) {
                                    this.copy_user_answer[this.current_timu.id].splice(index, 1, {
                                        ...this.copy_user_answer[this.current_timu.id][index],
                                        active: false,
                                        error_flg: true
                                    })
                                } else {
                                    this.copy_user_answer[this.current_timu.id].splice(index, 1, {
                                        ...this.copy_user_answer[this.current_timu.id][index],
                                        active: false,
                                        error_flg: false
                                    })
                                }
                            } else {
                                if (this.current_timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(item.answer_code.toString().toLowerCase().replace(/\s/g, '')) === -1) {
                                    this.copy_user_answer[this.current_timu.id].splice(index, 1, {
                                        ...this.copy_user_answer[this.current_timu.id][index],
                                        active: true,
                                        error_flg: true
                                    })
                                } else {
                                    this.copy_user_answer[this.current_timu.id].splice(index, 1, {
                                        ...this.copy_user_answer[this.current_timu.id][index],
                                        active: true,
                                        error_flg: false
                                    })
                                }
                            }
                        }
                    }
                }
            },
            // 提交答案
            async post_answer_req() {
                // this.copy_post_answer_right=[],
                this.is_duoxuan_sub = true
                let answers = this.copy_user_answer[this.current_timu.id];
                let answer = '';
                for (let i = 0, leng = answers.length; i < leng; i++) {
                    if (answers[i].active) {
                        answer += answers[i].answer_code
                    }
                }
                this.copy_post_status = Object.assign({}, this.copy_post_status, {
                    [this.current_timu.id]: true
                });

                let timu_index = -1;
                for (let i = 0, leng = this.timu_list.length; i < leng; i++) {
                    if (this.current_timu.id === this.timu_list[i].id) {
                        timu_index = i;
                        break;
                    }
                }
                //
                if (this.current_timu.right_answer.toString().toLowerCase().replace(/\s/g, '') === answer.toString().toLowerCase().replace(/\s/g, '')) {
                    this.copy_post_answer_right = Object.assign({}, this.copy_post_answer_right, {
                        [this.current_timu.id]: true
                    });
                    if (timu_index !== -1) {
                        // if_que 答题状态：1是错2是对3是未答过此题
                        this.timu_list.splice(timu_index, 1, {...this.timu_list[timu_index], state: 2})
                    }
                } else {
                    if (timu_index !== -1) {
                        this.timu_list.splice(timu_index, 1, {...this.timu_list[timu_index], state: 1})
                    }
                }
                let url = ''
                // 1：章节练习  2：历年真题
                if (this.type == 1) {
                    // 1：章节练习
                    url = this.$myHttp.urlMap.unitansqueedit
                } else if (this.type == 2) {
                    // 2：历年真题
                    url = this.$myHttp.urlMap.zhentiansqueedit
                }
                let that = this;
                let res = await this.$myHttp.post({
                    url: url,
                    data: {
                        id: this.current_timu.id,
                        answer: answer
                    },
                    needLogin: true
                });
                if (res.code == 1) {
                    //0:错，1：对
                    this.answer_type = res.data
                    that.$set(this.current_timu, 'post_status', 1)
                }
            },
            // 收藏
            async collect_opt() {
                let url = ''
                // 1：章节练习  2：历年真题
                if (this.type == 1) {
                    // 1：章节练习
                    url = this.$myHttp.urlMap.unitshoucangeedit
                } else if (this.type == 2) {
                    // 2：历年真题
                    url = this.$myHttp.urlMap.zhentishoucangeedit
                }
                let res = await this.$myHttp.post({
                    url: url,
                    data: {
                        id: this.current_timu.id
                    },
                    needLogin: true
                });
                if (res.code == 1) {
                    if (this.current_timu.is_fav == 1) {
                        this.$set(this.current_timu, 'is_fav', 0)
                        uni.showToast({
                            icon: 'none',
                            title: '取消收藏'
                        });
                    } else {
                        this.$set(this.current_timu, 'is_fav', 1)
                        uni.showToast({
                            icon: 'none',
                            title: '添加收藏'
                        });
                    }
                }
            },
            // 设置字号大小
            set_font_size_type(e) {
                // font_size_type
                this.font_size_type = e.detail.value
            },
            // 设置是否黑夜模式
            set_if_theme_dark(e) {
                // if_theme_dark
                this.if_theme_dark = e.target.value
            },
            //清空答题卡记录
            emptyLog() {
                let that = this
                uni.showModal({
                    title: "警告",
                    content: "清除记录后错题记录也会清除，请谨慎操作",
                    confirmText: "确认清除",
                    confirmColor: '#3c7bfc',
                    success: function success(res) {
                        if (res.confirm) {
                            that.emptyTestLog();
                        } else if (res.cancel) {
                            console.log("用户点击取消");
                        }
                    }
                });
            },
            async emptyTestLog() {
                let data = {}
                let url = ""
                if (this.type == 1) {
                    // 1：章节练习
                    data = {
                        unit_id: this.id
                    };
                    url = this.$myHttp.urlMap.emptyTestLog
                } else if (this.type == 2) {
                    // 2：历年真题
                    data = {
                        library_id: this.id
                    };
                    url = this.$myHttp.urlMap.emptyLibraryLog
                }
                let res = await this.$myHttp.post({
                    url: url,
                    data: data,
                    needLogin: true
                });
                if (res.code == 1) {
                    this.get_timu_list();
                    this.get_timu_order();
                    this.show_change_moshi = false;
                    this.copy_user_answer = {}
                }
            },
            // 中途退出
            over_dati() {
                this.over_dati_info = {
                    total_num: this.total_num,
                    zhengquelv: (100 * (this.my_res.right_num / ((this.my_res.right_num + this.my_res.error_num == 0) ? 1 : (this.my_res.right_num + this.my_res.error_num)))).toFixed(2),
                    right_num: this.my_res.right_num,
                    error_num: this.my_res.error_num,
                    yida_num: this.my_res.right_num + this.my_res.error_num
                };
                // console.log(this.over_dati_info)
                this.$nextTick(() => {
                    // 显示弹窗
                    this.show_over_dati = true;
                });
            },
            tap_handler(type) {
                if (type == 0) {
                    this.show_over_dati = false;
                } else if (type == 1) {
                    this.$redirectTo(
                        '/pages/questionBank/questionOver/index?id=' +
                        this.id +
                        '&from_type=' +
                        this.type +
                        '&error_num=' +
                        this.my_res.error_num +
                        '&right_num=' +
                        this.my_res.right_num +
                        '&start_time=' +
                        this.start_time +
                        '&zhengquelv=' +
                        100 * (this.my_res.right_num / ((this.my_res.right_num + this.my_res.error_num == 0) ? 1 : (this.my_res.right_num + this.my_res.error_num))).toFixed(2) +
                        '&total_num=' +
                        this.total_num || 0
                    )
                } else if (type == 3) {
                    this.show_continue_answer = false;
                    this.choice_timu_by_id({
                        id: this.timu_order
                    })
                } else if (type == 4) {
                    this.show_continue_answer = false;
                    this.get_timu_info();
                }
            },
            show_beiti_click() {
                this.show_beiti = true;
                this.answer_type = 1
            }
        }
    };
</script>

<style>
    page {
        background: #fff
    }

    .kaoshi-head-top {
        color: #fff;
    }

    .kaoshi-head-top .kaoshi-head-left {
        width: 20%;
        display: flex;
        align-items: center;
    }

    .kaoshi-head-top .kaoshi-head-m {
        width: 60%;
        text-align: center;
        display: flex;
        font-size: 14px;
        justify-content: center;
        align-items: center;
        font-weight: normal;
    }

    .moshi-active {
        background: #fff;
        color: #3c7bfc;
        height: 28px;
        border-radius: 5px;
        text-align: center;
        line-height: 28px;
        padding: 0 10px;
        width: 45%;
        margin-left: 6px;
    }

    .moshi {
        border: #fff solid 1px;
        color: #fff;
        height: 28px;
        border-radius: 5px;
        text-align: center;
        line-height: 28px;
        padding: 0 10px;
        margin-left: 6px;
        width: 45%;
    }

    .index-head-top .index-head-r {
        width: 20%;
        text-align: right;
        dispaly: flex
    }

    .index-head-r .iconfont {
        font-size: 24px;
        flex: 1;
        align-items: center;
    }

    .index-head-top .index-head-l .iconfont {
        font-size: 20px;
    }

    .questionBankAnswer {
        background: #fff;
        border-bottom: solid 1px #f6f7f9;
        padding: 16px;
        font-size: 16px;
    }

    .questionBankAnswer-flex {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .questionBankAnswer-top-l {
        display: flex;
        font-size: 16px;
        align-items: center;
    }

    .questionBankAnswer-top {
        color: #9a9a9a;
    }

    .questionBankAnswer-top span {
        color: #000;
        font-weight: bold;
    }

    .questionBankAnswer-tx {
        background: #ececec;
        color: #3c7bfc;
        padding: 4px 12px;
        font-size: 12px;
        margin-left: 8px;
        border-radius: 14px 14px 14px 0;
    }

    .questionBankAnswer-top-r {
        color: #ababab;
        font-size: 13px;
    }

    .questionBankAnswer-title {
        margin-top: 8px;
    }

    .questionBankAnswer-content {
        padding: 0 16px;
        margin-bottom: 0;
    }

    .questionBankAnswer-content .active-bg {
        background: #e8f7e8;
    }

    .questionBankAnswer-content .error-bg {
        background: #feeceb;
    }

    .questionBankAnswer-content-menu {
        display: flex;
        align-items: center;
        margin: 13px 0;
        background: #f7f7f7;
        padding: 13px;
        border-radius: 6px;
    }

    .questionBankAnswer-content-num {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        color: #5a5a5a;
        margin-top: 2px;
        font-size: 18px;
    }

    .questionBankAnswer-content-menu .active {
        background: #0ec380;
        color: #fff;
        position: relative;
    }

    .questionBankAnswer-content-menu .error {
        background: red;
        color: #fff;
    }

    .questionBankAnswer-content-txt {
        flex: 1;
        margin-left: 12px;
        color: #5a5a5a;
    }

    .order-pay {
        background: #fff;
        position: fixed;
        bottom: 0;
        width: 100%;
        font-size: 18px;
        border-top: solid 1px #eee;
        z-index: 100;
        display: flex;
        justify-content: center;
        padding: 8px 0;
    }

    .questionBankAnswer-dc {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        font-size: 14px;
    }

    .questionBankAnswer-dc .questionBankAnswer-dc-flex:first-child {
        display: flex;
        align-items: center;
        text-align: center;
        color: #0ec358;
        padding: 0 14px;
    }

    .questionBankAnswer-dc-flex .iconfont {
        font-size: 18px;
    }

    .questionBankAnswer-dc .questionBankAnswer-dc-flex:last-child {
        display: flex;
        align-items: center;
        color: #ff4c4c;
    }

    .questionBankAnswer-r {
        flex: 0 0 21%;
        display: flex;
        font-size: 14px;
        align-items: center;
        color: #999;
    }

    .questionBankAnswer-r .iconfont {
        font-size: 22px;
    }

    .questionBankAnswer-r-menu span {
        color: #000;
        font-weight: bold;
    }

    .questionBankAnswer-dui {
        position: absolute;
        bottom: 0;
        right: -3px;
        top: 11px;
    }

    .questionBankAnswer-dui-img {
        width: 21px;
        height: 16px;
    }

    /*收藏*/
    .collect .iconfont {
        color: #ffe51f;
    }

    /*题卡*/
    .tika {
        background: #fff;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 400px;
        z-index: 100;
        overflow: hidden;
        overflow-y: scroll;
        border: none !important;
        left: 0 !important;
    }

    .order-pay1 {
        background: #fff;
        width: 100%;
        font-size: 18px;
        z-index: 100;
        display: flex;
        justify-content: center;
        padding: 12px 0;
        border-bottom: solid 1px #eee;
    }

    .tika-content {
        width: 100%;
    }

    .tika-content-n {
        float: left;
        text-align: center;
        width: 36px;
        height: 36px;
        border: solid 1px #eee;
        border-radius: 50%;
        margin: 7px;
        line-height: 36px;
        font-size: 15px;
    }

    .order-pay-z {
        background: rgba(0, 0, 0, 0.45);
        width: 100%;
        z-index: 100;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .order-pay {
        background: #fff;
        position: fixed;
        bottom: 0;
        width: 100%;
        font-size: 18px;
        border-top: solid 1px #eee;
        z-index: 100;
        display: flex;
        justify-content: center;
        padding: 12px 0;
    }

    .questionBankAnswer-bottom {
        flex: 0 0 47%;
        display: flex;
        font-size: 14px;
    }

    .questionBankAnswer-bottom-flex {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .questionBankAnswer-bottom-flex .iconfont {
        margin-right: 4px;
        font-size: 18px;
    }

    .questionBankAnswer-bottom .questionBankAnswer-bottom-flex:first-child {
        padding-left: 14px;
    }

    .questionBankAnswer-dc {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        font-size: 14px;
    }

    .questionBankAnswer-dc .questionBankAnswer-dc-flex:first-child {
        display: flex;
        align-items: center;
        text-align: center;
        color: #0ec358;
        padding: 0 14px;
    }

    .questionBankAnswer-dc-flex .iconfont {
        font-size: 18px;
    }

    .questionBankAnswer-dc .questionBankAnswer-dc-flex:last-child {
        display: flex;
        align-items: center;
        color: #ff4c4c;
    }

    .questionBankAnswer-r {
        flex: 0 0 21%;
        display: flex;
        font-size: 14px;
        align-items: center;
        color: #999;
    }

    .questionBankAnswer-r .iconfont {
        font-size: 22px;
    }

    .questionBankAnswer-r-menu span {
        color: #000;
        font-weight: bold;
    }

    /*答案*/
    .questionBankAnswer-jiexi-daan {
        background: #f7f7f7;
        margin: 0 auto;
        display: flex;
        padding: 11px 32px;
        font-size: 14px;
        width: 74%;
    }

    .dui {
        background: #e8f7e8;
    }

    .cuo {
        background: #feeceb;
    }

    .questionBankAnswer-jiexi-daan-flex {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .questionBankAnswer-jiexi-daan-flex-dui {
        color: #60c25f;
        font-size: 30px;
    }

    .questionBankAnswer-jiexi-flex {
        display: flex;
    }

    .questionBankAnswer-jiexi-daan-line {
        width: 1px;
        height: 20px;
        background: #dadada;
        margin: 19px 17px;
    }

    .questionBankAnswer-jiexi-daan-flex-cuo {
        color: #f4665b;
        font-size: 30px;
    }

    /*答题数据*/
    .questionBankAnswer-jiexi-sj {
        display: flex;
        padding: 12px 10px;
        font-size: 16px;
        background: #ebf6ff;
        margin: 0 10px;
        flex-direction: column;
        margin-top: 10px;
    }

    .questionBankAnswer-jiexi-sj-title {
        font-size: 15px;
        color: #6d7276;
        margin-bottom: 3px;
    }

    .questionBankAnswer-jiexi-sj span {
        color: #60c25f;
        font-weight: bold;
    }

    /*解析*/
    .questionBankAnswer-jiexi-jx {
        padding: 12px 20px;
        font-size: 16px;
        margin-bottom: 44px;
    }

    .questionBankAnswer-jiexi-jx-title {
        color: #6d7276;
        margin-bottom: 3px;
    }

    /*字号和夜间模式*/
    .font1 {
        font-size: 12px !important;
    }

    .font2 {
        font-size: 15px !important;
    }

    .font3 {
        font-size: 25px !important;
    }

    .font4 {
        font-size: 35px !important;
    }

    .yejian,
    .yejian .index-head,
    .yejian .questionBankAnswer,
    .yejian .questionBankAnswer-jiexi-daan,
    .yejian .questionBankAnswer-jiexi-sj,
    .yejian .order-pay1,
    .yejian .tika {
        background: #3a3a3a !important;
        color: #7b7b7b !important;
        border-bottom: solid 1px #191919;
    }

    .yejian .questionBankAnswer-r-menu span {
        color: #fff;
        font-weight: bold;
    }

    .yejian .uni-list-cell-pd {
        background: #3a3a3a;
    }

    .yejian .moshi-active {
        background: #fff;
        color: #000;
    }

    .yejian .tika-content-n {
        border: solid 1px #626262;
    }

    .yejian .index-head-m, .yejian .iconfont {
        color: #7b7b7b !important
    }

    .yejian .order-pay {
        border-top: solid 1px #191919;
        background: #3a3a3a !important;
        color: #7b7b7b !important;
    }

    .yejian .questionBankAnswer-content-menu {
        background: #000;
    }

    .yejian .questionBankAnswer-tx {
        background: #545454;
        color: #a7a7a7;
    }

    .duoxuan {
        margin-bottom: 20px !important;
        width: 92%;
        margin: 0 auto;
        background-color: #3c7bfc;
        border-radius: 30px;
        color: #fff;
    }

    .duoxuan_checked {
        margin-bottom: 20px !important;
        width: 92%;
        margin: 0 auto;
        background-color: #d6d6d6;
        border-radius: 30px;
        color: #f8f8f8
    }

    /* 列表 */
    .uni-list {
        background-color: #FFFFFF;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .uni-list:after {
        position: absolute;
        z-index: 10;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: none;
    }

    .uni-list::before {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .uni-list-cell {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .uni-list-cell-hover {
        background-color: #eee;
    }

    .uni-list-cell-pd {
        padding: 22upx 30upx;
    }

    .uni-list-cell-left {
        font-size: 28upx;
        padding: 0 30upx;
    }

    .uni-list-cell-db {
        font-size: 16px;
    }

    .uni-list-cell-db,
    .uni-list-cell-right {
        flex: 1;
    }

    .uni-list-cell::after {
        position: absolute;
        z-index: 3;
        right: 30upx;
        bottom: 0;
        left: 30upx;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #e4e4e4;
    }

    .uni-list .uni-list-cell:last-child::after {
        height: 0upx;
    }

    .uni-list-cell-last.uni-list-cell::after {
        height: 0upx;
    }

    .uni-list-cell-divider {
        position: relative;
        display: flex;
        color: #999;
        background-color: #f7f7f7;
        padding: 15upx 20upx;
    }

    .uni-list-cell-divider::before {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .uni-list-cell-divider::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #e4e4e4;
    }

    .uni-list-cell-navigate {
        font-size: 30upx;
        padding: 22upx 30upx;
        line-height: 48upx;
        position: relative;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        justify-content: space-between;
        align-items: center;
    }

    .uni-list-cell-navigate {
        padding-right: 36upx;
    }

    .uni-navigate-badge {
        padding-right: 50upx;
    }

    .uni-list-cell-navigate.uni-navigate-right:after {
        font-family: uniicons;
        content: '\e583';
        position: absolute;
        right: 24upx;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .uni-list-cell-navigate.uni-navigate-bottom:after {
        font-family: uniicons;
        content: '\e581';
        position: absolute;
        right: 24upx;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .uni-list-cell-navigate.uni-navigate-bottom.uni-active::after {
        font-family: uniicons;
        content: '\e580';
        position: absolute;
        right: 24upx;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .uni-collapse.uni-list-cell {
        flex-direction: column;
    }

    .uni-list-cell-navigate.uni-active {
        background: #eee;
    }

    .uni-list.uni-collapse {
        box-sizing: border-box;
        height: 0;
        overflow: hidden;
    }

    .uni-collapse .uni-list-cell {
        padding-left: 20upx;
    }

    .uni-collapse .uni-list-cell::after {
        left: 52upx;
    }

    .uni-list.uni-active {
        height: auto;
    }

    .jiucuo .jc-h1 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .jiucuo-textarea {
        border: solid 1px #f5f5f5;
        padding: 10px;
        width: 100%;
    }

    .jc-button {
        height: 38px;
        line-height: 38px;
        width: 100%;
        margin-top: 10px;
        background: #3c7bfc !important;
        color: #000 !important;
        border-radius: 30px;
    }

    .qkbutton {
        background: #3c7bfc;
        color: #fff;
        padding: 5px 12px;
        font-size: 13px;
        border-radius: 4px;
        margin: 3px;
    }

</style>
